<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	
<head>
	
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Your own page title</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/green.css" />

</head>

<body>

<div id="outline">
	
<div id="wrapper">
	
<!-- START HEADER -->

<div id="header">

<div id="headerBox">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>

<h1>Header</h1>

</div><!-- END HEADER -->

<!-- START NAVIGATION TOP -->

<div id="navTop">
<ul>
<li><a href="index.html">Layout 1</a></li>
<li><a href="layout-2.html">Layout 2</a></li>
<li><a href="layout-3.html">Layout 3</a></li>
<li><a href="layout-4.html">Layout 4</a></li>
<li id="current"><a href="site-elements.html">Site Elements</a></li>
<li><a href="#">Colors</a>

<ul>
<li><a href="colors.html">Colors</a></li>
<li><a href="site-elements.html">Layout Blue</a></li>
<li><a href="layout-green.html">Layout Green</a></li>
<li><a href="layout-red.html">Layout Red</a></li>
<li><a href="layout-yellow.html">Layout Yellow</a></li>
<li><a href="layout-brown.html">Layout Brown</a></li>
<li><a href="layout-grey.html">Layout Grey</a></li>
</ul>

</li>
</ul>

</div><!-- END NAVIGATION TOP -->

<!-- START MAIN COLUMN -->

<div id="mainColumn-layout4">

<h2>Site Elements</h2>

<h2>Headline H2</h2>

<h3>Headline H3</h3>

<h4>Headline H4</h4>

<p class="clearfix"><img class="left" src="images/image.png" alt="" />
<strong>Image class="left"</strong> Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>

<p class="clearfix"><img class="right" src="images/image.png" alt="" />
<strong>Image class="right"</strong> Lorem At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p class="border">
<strong>class="border"</strong> Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p> 

<p><strong>Image class="center"</strong></p>

<p><img class="center" src="images/image.png" alt="" /></p>

<p><a href="#">Link...</a></p>

<!-- START FORM -->

<div class="form">

<h4>Contact</h4>

<form action="#" method="get">

<div class="formLeft">
Name:<br />
E-mail Address:<br />
Subject:<br />
Message:<br />
</div>

<div class="formRight">
<input type="text" name="name" /><br />
<input type="text" name="email" /><br />
<input type="text" name="subject" /><br />
<textarea rows="" cols=""></textarea><br /> 
<input class="submit" type="submit" value="Submit" /><br />
</div>
</form> 

</div><!-- END FORM -->

<!-- START BLOCKS -->

<h4>Blocks</h4>

<!-- START BLOCK 1 -->

<div class="blockRow">

<div class="block-25">
<div style="margin-right: 10px;">
<strong>25%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>

<div class="block-75">
<strong>75%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

</div><!-- END BLOCK 1 -->

<!-- START BLOCK 2 -->

<div class="blockRow">

<div class="block-33">
<div style="margin-right: 10px;">
<strong>33.33%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>

<div class="block-33">
<div style="margin-right: 10px;">
<strong>33.33%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>

<div class="block-33">
<strong>33.33%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

</div><!-- END BLOCK 2 -->

<!-- START BLOCK 3 -->

<div class="blockRow">

<div class="block-33">
<div style="margin: 0 10px 0 0;">
<strong>33.33%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>

<div class="block-66">
<strong>66.66%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

</div><!-- END BLOCK 3 -->

<!-- START BLOCK 4 -->

<div class="blockRow">

<div class="block-50">
<div style="margin-right: 10px;">
<strong>50%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>

<div class="block-50">
<strong>50%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

</div></div><!-- END BLOCK 4 -->

<!-- START BLOCK 5 -->

<div class="blockRow">

<div class="block-25">
<div style="margin-right: 10px;">
<strong>25%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div></div>

<div class="block-25">
<div style="margin-right: 10px;">
<strong>25%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div></div>

<div class="block-25">
<div style="margin-right: 10px;">
<strong>25%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div></div>

<div class="block-25">
<strong>25%</strong>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

</div></div><!-- END BLOCK 5 -->

<!-- END BLOCKS -->

</div><!-- END MAIN COLUMN -->

<!-- START FOOTER -->

<div id="footer">
Copyright 20xx <a href="#sitename">Your Sitename</a> | Original Design by <a href="http://www.wfiedler-online.de">wfiedler</a>
</div><!-- END FOOTER -->

</div></div>

</body>
</html>
